<template>
  <div
    class="home-message"
    ref="homeMessage">
    <w-nav-bar
      :title="navTitle"
      :more-home="false"
      @titleClick="navTitleClick"
    />
    <ul class="message-list">
      <li
        class="item"
        v-for="item in messageDataArr"
        :key="item.date"
        :class="{ 'current-item': messageCurrentClientId === item.current }"
      >
        <p class="date">{{ item.dateStr }}</p>
        <p class="title">
          {{ item.visitorName }}
        </p>
        <div class="message">
          <p class="text">{{ item.message }}</p>
        </div>
      </li>
    </ul>
    <div class="bottom-box">
      <x-textarea
        class="input"
        v-model="inputText" />
      <span
        class="send-btn"
        @click="sendBtnClick">发送</span>
    </div>
  </div>
</template>

<script>
  import { XTextarea, XButton } from 'vux'
  import WPopView from '../../../../../utils/popView'
  import { mapGetters } from 'vuex'
  export default {
    name: 'HomeMessage',
    components: {
      XTextarea,
      XButton
    },
    data() {
      return {
        inputText: ''
      }
    },
    computed: {
      ...mapGetters(['messageVisitorName', 'messageDataArr', 'messageCurrentClientId', 'messageClients']),
      navTitle() {
        return `${this.messageVisitorName || '访客'}(${this.messageClients.length})`
      }
    },
    watch: {
      'messageDataArr'() {
        this.$nextTick(() => {
          document.scrollingElement.scrollTop = document.scrollingElement.scrollHeight
        })
      }
    },
    mounted() {
      if (!this.messageVisitorName) {
        this.setVisiterName()
      }
    },
    beforeDestroy() {
      this.$store.commit('SET_UNREAD_COUNT')
    },
    methods: {
      /**
       * 标题点击
       */
      navTitleClick() {
        this.setVisiterName()
      },
      /**
       * 设置访客名称
       */
      setVisiterName() {
        WPopView.prompt('请输入访客名称', '', text => {
          if (!text) {
            return '请输入数据'
          }
        })
          .then(name => {
            this.$store.commit('SET_VISITOR_NAME', name)
          })
          .catch(() => {})
      },
      sendBtnClick() {
        if (!this.messageVisitorName) {
          this.setVisiterName()
        }
        if (!this.inputText) {
          WPopView.msgError('请输入数据')
          return
        }
        this.$store.commit('SEND_MESSAGE', this.inputText)
        this.inputText = ''
      }
    }
  }
</script>

<style scoped lang="scss">
.home-message {
  .bottom-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    align-items: center;
    display: flex;
    .send-btn {
      width: 50px;
      font-size: 16px;
      text-align: center;
      background-color: #2d78f4;
      color: #fff;
      line-height: 78px;
    }
    .input {
      flex: 1 0 auto;
    }
  }
  .message-list {
    list-style: none;
    padding: 0 10px 80px 10px;
    margin: 0;
    .item {
      .date {
        font-size: 14px;
        text-align: center;
        color: #ccc;
        margin-bottom: 5px;
      }
      .title {
        font-size: 18px;
        color: #666;
        margin: 0;
      }
      .message {
        font-size: 16px;
        color: #999;
        padding: 0 100px 0 0;
        display: flex;
        .text {
          background-color: #abdcff;
          border-radius: 5px;
          padding: 3px;
          word-break: break-all;
          margin: 10px 0;
        }
      }
    }
    .current-item {
      .title {
        text-align: right;
      }
      .message {
        padding: 0 0 0 100px;
        justify-content: flex-end;
      }
    }
  }
}
</style>
